import React, { useEffect, useState, useRef } from "react";
import {
  Form,
  InputNumber,
  Table,
  Typography,
  Button,
  Input,
  Select,
  Modal,
} from "antd";
import Draggable from "react-draggable";
import {
  getroad,
  getroadsearch,
  getroadadd,
  getroadremove,
  getsetroadadd,
} from "../../api/operation_maintenance/road_points";

import "./1.scss";
const App = () => {
  const { Option } = Select;
  const [search, setsearh] = useState({
    kind11: "",
    asidekind: "",
    nickname: "",
  });
  const layout = {
    labelCol: {
      span: 8,
    },
    wrapperCol: {
      span: 16,
    },
  };
  const tailLayout = {
    wrapperCol: {
      offset: 8,
      span: 16,
    },
  };
  const [form] = Form.useForm();
  const [data1, setdata1] = useState({});
  const [show, setshow] = useState();
  const [show1, setshow1] = useState();
  const EditableCell = ({
    editing,
    dataIndex,
    title,
    inputType,
    record,
    index,
    children,
    ...restProps
  }) => {
    const inputNode = inputType === "number" ? <InputNumber /> : <Input />;
    return (
      <td {...restProps}>
        {editing ? (
          <Form.Item
            style={{
              margin: 0,
            }}
            rules={[
              {
                message: `Please Input ${title}!`,
              },
            ]}
          >
            <soan>{inputNode}</soan>
          </Form.Item>
        ) : (
          children
        )}
      </td>
    );
  };
  const [data, setData] = useState([]);
  const [editingKey, setEditingKey] = useState("");
  const isEditing = (record) => record.key === editingKey;

  const cancel = () => {
    setEditingKey("");
  };

  //操作删除
  const [open, setOpen] = useState(false);
  const [bounds, setBounds] = useState({
    left: 0,
    top: 0,
    bottom: 0,
    right: 0,
  });
  const draggleRef = useRef(null);
  const showModal1 = () => {
    setOpen(true);
  };
  const handleOk1 = () => {
    getroadremove(data1).then((res) => {
      setData(res.data);
    });
    setOpen(false);
  };
  const handleCancel1 = (e) => {
    setOpen(false);
  };
  const onStart = (_event, uiData) => {
    const { clientWidth, clientHeight } = window.document.documentElement;
    const targetRect = draggleRef.current?.getBoundingClientRect();
    if (!targetRect) {
      return;
    }
    setBounds({
      left: -targetRect.left + uiData.x,
      right: clientWidth - (targetRect.right - uiData.x),
      top: -targetRect.top + uiData.y,
      bottom: clientHeight - (targetRect.bottom - uiData.y),
    });
  };
  //生命周期
  useEffect(() => {
    getroad().then((res) => {
      setData(res.data);
    });
  }, []);
  const edit = (record) => {
    form.setFieldsValue({
      name: "",
      age: "",
      address: "",
      ...record,
    });
  };
  //渲染表单
  const columns = [
    {
      title: "序号",
      render: function (text, record, index) {
        return <h3>{index + 1}</h3>;
      },
    },
    {
      title: "所在省份",
      dataIndex: "asidekind",
    },
    {
      title: "所在城市",
      dataIndex: "nickname",
    },
    {
      title: "所在县区",
      dataIndex: "kind",
    },
    {
      title: "道路站点名称",
      dataIndex: "kind11",
    },
    {
      title: "操作",
      dataIndex: "operation",
      render: (_, record) => {
        return (
          <>
            <Typography.Link
              onClick={() => {
                setdata1(record);
               
                setaree({
                  asidekind:record.asidekind,
                  kind:record.kind,
                  kind11:record.kind11,
                  nickname:record.nickname
                })
                showModal();
                setshow(false);
              }}
            >
              操作
            </Typography.Link>
            <Typography.Link
              onClick={() => {
                setdata1(record);
                setshow1(true)
                showModal1();
              }}
              style={{ marginLeft: "10px", marginRight: "10px" }}
            >
              删除
            </Typography.Link>
            <Typography.Link onClick={() => {
              edit(record)
              setdata1(record);
              setshow1(false)
              showModal1();
              }}>查看</Typography.Link>
          </>
        );
      },
    },
  ];

  //分页功能
  const mergedColumns = columns.map((col) => {
    if (!col.editable) {
      return col;
    }
    return {
      ...col,
      onCell: (record) => ({
        record,
        inputType: col.dataIndex === "age" ? "number" : "text",
        dataIndex: col.dataIndex,
        title: col.title,
        editing: isEditing(record),
      }),
    };
  });

  //实现添加功能
  const [aereewola, setaree] = useState({
    asidekind: "",
    nickname: "",
    kind: "",
    kind11: "",
  });
  // wo)data
  const [isModalOpen, setIsModalOpen] = useState(false);
  const showModal = (ref) => {
    setIsModalOpen(true);
  };

  //发送添加请求
  const handleOk = () => {
    console.log(aereewola);
    getroadadd(aereewola).then((res) => {
      //修改数据
      setData(res.data);
      //关闭弹窗
      setaree({ asidekind: "", nickname: "", kind: "", kind11: "" });
      form.resetFields();
      setIsModalOpen(false);
    });
  };
  //发送请求修改当前数据
  const handleOk2 = () => {
    const data = {  ...data1,...aereewola, };
    getsetroadadd(data).then((res) => {
      console.log(res);
      //修改数据
      setData(res.data);
      //关闭弹窗
      setaree({ asidekind: "", nickname: "", kind: "", kind11: "" });
      form.resetFields();
      setIsModalOpen(false);
    });
  };

  //关闭表单
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  
  return (
    <>
      <Form {...layout} form={form} name="control-hooks">
        <div className="left">
          <Form.Item name="note" label="道路站点名称">
            <Input
              value={search.kind11}
              onChange={(e) => {
                setsearh({ ...search, kind11: e.target.value });
              }}
            />
          </Form.Item>
          <Form.Item label="所属区域">
            <Select
              placeholder="请选择一个选项"
              onChange={(value) => {
                setsearh({ ...search, asidekind: value });
              }}
              allowClear
              // value={search.asidekind}
            >
              <Option value="山西省">山西省</Option>
              <Option value="湖北省">湖北省</Option>
              <Option value="上海市">上海市</Option>
              <Option value="河北省">河北省</Option>
              <Option value="陕西省">陕西省</Option>
            </Select>
            <Select
              // value={search.nickname}
              placeholder="请选择一个选项"
              onChange={(value) => {
                setsearh({ ...search, nickname: value });
              }}
              allowClear
            >
              <Option value="运城区">运城区</Option>
              <Option value="黄石区">黄石区</Option>
              <Option value="浦东区">浦东区</Option>
              <Option value="大雁区">大雁区</Option>
            </Select>
          </Form.Item>
        </div>
        <div className="right">
          <Form.Item {...tailLayout} style={{ width: 300 }}>
            <Button
              type="primary"
              htmlType="submit"
              style={{ marginLeft: "10px", marginRight: "10px" }}
              onClick={() => {
                getroadsearch(search).then((res) => {
                  setData(res);
                });
              }}
            >
              查询
            </Button>
            <Button
              type="primary"
              htmlType="button"
              onClick={() => {
                showModal();
                setshow(true);
              }}
            >
              新增
            </Button>
          </Form.Item>
        </div>
      </Form>
      <Modal
        title={show ? "新增道路站点" : "修改当前道路站点"}
        width={800}
        centered={false}
        className="los"
        open={isModalOpen}
        onOk={show ? handleOk : handleOk2}
        onCancel={handleCancel}
      >
        <Form
          form={form}
          name="basic"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item
            label="所在省份"
            name="asidekind"
            rules={[{ required: true, message: "Please input your key!" }]}
          >
            <Input
              value={aereewola.asidekind}
              onChange={(e) => {
                setaree({ ...aereewola, asidekind: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="所在城市"
            name="nickname"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input
              value={aereewola.nickname}
              onChange={(e) => {
                setaree({ ...aereewola, nickname: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="所在县区"
            name="kind"
            rules={[{ required: true, message: "Please input your age!" }]}
          >
            <Input
              value={aereewola.kind}
              onChange={(e) => {
                setaree({ ...aereewola, kind: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="道路站点名称"
            name="kind11"
            rules={[{ required: true, message: "Please input your address!" }]}
          >
            <Input
              value={aereewola.kind11}
              onChange={(e) => {
                setaree({ ...aereewola, kind11: e.target.value });
              }}
            />
          </Form.Item>
        </Form>
      </Modal>
      <Form form={form} component={false} name="pagination">
        <Table
          rowKey="id"
          components={{
            body: {
              cell: EditableCell,
            },
          }}
          bordered
          dataSource={data}
          columns={mergedColumns}
          rowClassName="editable-row"
          pagination={{
            onChange: cancel,
          }}
        />
      </Form>
      <Modal
        title={show1?'删除':'查看'}
        open={open}
        onOk={show1?(handleOk1):(handleCancel1)}
        onCancel={handleCancel1}
        modalRender={(modal) => (
          <Draggable
            bounds={bounds}
            nodeRef={draggleRef}
            onStart={(event, uiData) => onStart(event, uiData)}
          >
            <div ref={draggleRef}>{modal}</div>
          </Draggable>
        )}
      >
        {show1?(<p>您是否删除</p>):(<>
          <Form
          form={form}
          name="basic11"
          labelCol={{ span: 8 }}
          wrapperCol={{ span: 16 }}
          style={{ maxWidth: 600 }}
          initialValues={{ remember: true }}
          autoComplete="off"
        >
          <Form.Item
            label="所在省份"
            name="asidekind1"
            rules={[{ required: true, message: "Please input your key!" }]}
          >
            <Input
              disabled
              value={aereewola.asidekind}
              onChange={(e) => {
                setaree({ ...aereewola, asidekind: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="所在城市"
            name="nickname11111"
            rules={[{ required: true, message: "Please input your name!" }]}
          >
            <Input
              disabled
              value={aereewola.nickname}
              onChange={(e) => {
                setaree({ ...aereewola, nickname: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="所在县区"
            name="kind123"
            rules={[{ required: true, message: "Please input your age!" }]}
          >
            <Input
            disabled
              value={aereewola.kind}
              onChange={(e) => {
                setaree({ ...aereewola, kind: e.target.value });
              }}
            />
          </Form.Item>

          <Form.Item
            label="道路站点名称"
            name="kind113"
            rules={[{ required: true, message: "Please input your address!" }]}
          >
            <Input
            disabled
              value={aereewola.kind11}
              onChange={(e) => {
                setaree({ ...aereewola, kind11: e.target.value });
              }}
            />
          </Form.Item>
        </Form>
        </>)}
      </Modal>

    </>
  );
};

export default App;
